Your Questions: Best way to structure forms in HTML?
Time for question number two!
This time, it’s a short one… about HTML.
Brian Liles asked today’s question:
What do you think about form design?
Are you adivwithp? Are you anolwithli?
How about tables?
Or something even more funky?
None of the above, actually, Brian!
I used to be a proponent of using definition lists (dl tags) with definition terms for the labels and definitions as the fields themselves. They’re sure easy to structure.
Now I have to admit that that’s a pretty bad idea. It happens.
My current advice? Use the fields that the W3C, in their finite wisdom, have given us.
If you check out the code we use on the signup form for freckle time tracking, you can see what I mean:
<fieldset class="">
<div class="group">
<div class="field separated">
<label for="user_first_name">first name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div class="field">
<label for="user_last_name">last name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
</div>
We break down groups of related fields with fieldset tags, and then within that, we use div tags to style the fields within—and that gives us the flexibility to make some float side by side, some have new lines, and tweak the padding and stuff for each individual case, if necessary
Also, I’m not a Semantic Web True Believer, but when it doesn’t hurt or cost you anything more, I’m all for it.
Bonus Tip: Forms are easier to scan and read with labels on top of the fields (not counting checkboxes and radio buttons, of course).
That’s all for today!
Seeya again tomorrow, Thursday, and Friday!
Great points; this is the current method I am using for forms. In fact, I’m developing a Rails plugin to automatically format fields this way: http://github.com/brandonmartinez/styled_forms_helper/tree/master
Thanks for answering my question Amy. And email me your address!! I have some goodies for you.
Could you tell me what is wrong about marking up a form as a DL with the LABEL elements inside the DT element? After trying out several other approaches to forms, this is the one that feels the best for me. I really don’t like using DIV’s for anything other than sections.
There is nothing that prohibits you from nesting fieldsets within other fieldsets … and if you "read the document out loud" it will make sense.
"This grouping of fields are related to a company, within this group are two other groups, address details and a brief history".
Once you get into adding tags to use as styling hooks, I prefer to go with div/span, as they have far less sematic value than a fieldset.
I, once marked up forms using definition lists just the way you described it, and arrived at the same conclusion, definition lists can be inflexible, especially with checkboxes and radio buttons.
Currently, I typically wrap the input in the label–using the label as a block element. This is completely valid (W3C even shows this in one of their examples). It also means the FOR attribute is no longer required, as the corresponding input is a child element of the label.
So far, I’ve had no issues with this solution.
Agree with your point about using the semantic markup.
The Bonus Tip is a bit misleading. If the questions are all easy, obvious, and appropriate to the reason why your user is filling in the form, then there is some evidence that putting the labels above the boxes makes it a bit quicker for users to fill in the form. This speed advantage is definitely offset by other problems if the questions are complex, or if the user might want to get a sense of what’s being asked before filling in the form. See my article: "Label placement on forms" http://www.usabilitynews.com/news/article3507.asp
Thank you!! I’ve been looking for the "best" way to teach students how to mark up forms and this is something I can recommend.
Chris Griffin, although your method validates it is not accessible if you care about such things.
Great Tips. Fast Shipping. A+++. Will do business with again.
Oh… this isn’t an Ebay feedback form? Well, you know what I mean. Thanks Amy.
Forms are one of those things I haven’t done enough of to get right yet. This will certainly help. I will give your structure a try.
One of my problems with HTML and CSS, is that I lean towards eliminating all but the minimum set of HTML tags. Then when I got to style it, I go nuts. I have to learn that it’s "OK" to add additional divs and like you did, the fieldsets, to gave CSS something to get it’s hooks onto.
I do trust all of the ideas you have presented to your post. They’re very convcniing and will certainly work. Nonetheless, the posts are very quick for newbies. May just you please lengthen them a bit from next time? Thank you for the post.